<template>
    <div class="slide-show"  @mouseover="clearTime" @mouseleave="runInv">
        <div class="slide-img">
        <a :href="slides[nowIndex].href">
            <transition name="slide-trans">
                <img :v-if="isShow" :src="slides[nowIndex].src">
            </transition>
            <transition name="slide-trans-old">
                <img :v-if="!isShow" :src="slides[nowIndex].src">
            </transition>
        </a>
        </div>
        <h2>{{ slides[nowIndex].title }} </h2>
        <ul class="slide-pages">
            <li @click="goTo(prveIndex)">&lt;</li>
            <li
                v-for="(item, index) in slides"
                @click="goTo(index)"
            >
                <a>{{ index + 1 }} </a>
            </li>
            <li @click="goTo(nextIndex)">&gt;</li>
        </ul>
    </div>
</template>


<script>
export default {
    // 接受父组件传过来的值，子组件用props 接收一下 props是一个对象
    props: {
        slides: {
            type: Array,
            default: []
        }
    },
    data() {
      return {
        nowIndex: 0,
        isShow: true,
      }
    },
    // 计算属性可以计算前一页后一页的变化
    computed: {
      prveIndex() {
        if(this.nowIndex === 0){
          return this.slides.length - 1
        } else {
          return this.nowIndex - 1
        }
      },
      nextIndex() {
        if(this.nowIndex === this.slides.length - 1) {
          return 0
        } else {
          return this.nowIndex + 1
        }
      }
    },
    methods: {
        // 跳转页面方法
        goTo(index) {
            this.isShow = false
            this.nowIndex = index
            // 子组件给父组件传值
            this.$emit('onchange', index)
        },
        // 轮播图循环
        runInv() {
          this.invId = setInterval(() => {
            // console.log('写完方法后一定要记得调用')
            this.goTo(this.nextIndex)
          }, 1500);
        },
        clearTime() {
          // 清除定时器
          clearInterval(this.invId)
        }
    },
    // mounted 钩子函数用来开始渲染 Dom
    mounted() {
       this.runInv()
    }

}
</script>


<style  scoped>
.slide-trans-enter-active {
  transition: all .5s;
}
.slide-trans-enter {
  transform: translateX(900px);
}
.slide-trans-old-leave-active {
  transition: all .5s;
  transform: translateX(-900px);
}
.slide-show {
  position: relative;
  margin: 15px 15px 15px 0;
  width: 900px;
  height: 500px;
  overflow: hidden;
}
.slide-show h2 {
  position: absolute;
  width: 100%;
  height: 100%;
  color: #fff;
  background: #000;
  opacity: .5;
  bottom: 0;
  height: 30px;
  text-align: left;
  padding-left: 15px;
}
.slide-img {
  width: 100%;
}
.slide-img img {
  width: 100%;
  position: absolute;
  top: 0;
}
.slide-pages {
  position: absolute;
  bottom: 10px;
  right: 15px;
}
.slide-pages li {
  display: inline-block;
  padding: 0 10px;
  cursor: pointer;
  color: #fff;
}
.slide-pages li .on {
  text-decoration: underline;
}
</style>